<template>
  <div class="boxContent">
    <div class="appBox">
      <div class="searchList">
        <el-form :model="state.params"
                 ref="FormInstance "
                 class="boxFrom">
          <div class="searchBox">
            <template v-for="(item, index) in state.totalInputColumns"
                      :key="index">
              <el-form-item v-if="item.type == 'input'">
                <el-input v-model="state.params[item.key]"
                          :placeholder="item.label"></el-input>
              </el-form-item>
              <el-form-item v-if="item.type == 'select'">
                <el-select v-model="state.params[item.key]"
                           :placeholder="item.label"
                           clearable
                           v-if="item.key == 'cid'">
                  <el-option />
                </el-select>
                <el-select v-model="state.params[item.key]"
                           :placeholder="item.label"
                           clearable
                           v-if="item.key == 'type'">
                  <el-option label="平台"
                             :value="0" />
                  <el-option label="企业"
                             :value="1" />
                </el-select>
                <el-select v-model="state.params[item.key]"
                           :placeholder="item.label"
                           clearable
                           v-if="item.key == 'status'">
                  <el-option label="正常"
                             :value="0" />
                  <el-option label="禁用"
                             :value="1" />
                </el-select>

                <el-cascader v-model="state.params[item.key]"
                             :options="state.propsCity"
                             :props="state.props"
                             :placeholder="item.label"
                             clearable
                             v-if="item.key == 'city'" />
              </el-form-item>
            </template>
          </div>

          <el-form-item class="btns">
            <el-button v-preventReClick
                       type="primary"
                       @click="methods.handleAction('add')"
                       v-permission="1153">创建部门</el-button>
            <!-- <el-button v-preventReClick type="primary"
                       plain
                       @click="methods.handleAction('query')">搜索</el-button>
            <el-button v-preventReClick @click="methods.handleAction('reset')">重置</el-button> -->
          </el-form-item>
        </el-form>
      </div>
      <div class="tabaleBox">
        <el-table border
                  v-loading='state.loading'
                  :data="state.tableData"
                  default-expand-all
                  row-key="id"
                  :tree-props="{children: 'childList', hasChildren: 'hasChildren'}"
                  :header-cell-style="{ color: '#000' }">

          <el-table-column prop="deptName"
                           label="部门名称"
                           sortable>
          </el-table-column>

          <el-table-column prop="leaderName"
                           width="180"
                           align="center"
                           label="负责人">
          </el-table-column>
          <el-table-column prop="createdAt"
                           label="创建时间"
                           align="center"
                           width="180">
          </el-table-column>
          <el-table-column prop="btns"
                           label="操作"
                           show-overflow-tooltip
                           align="center"
                           width="140"
                           fixed="right">
            <template #default="scope">
              <div class="flex_sb btnsDatil">
                <div @click="methods.handleAction('addSon', scope.row)"
                     v-permission="1154">新增</div>
                <div @click="methods.handleAction('edit', scope.row)"
                     v-permission="1155">编辑</div>
                <div @click="methods.handleAction('delete', scope.row)"
                     v-permission="1156">删除</div>
                <!-- <div @click="methods.handleAction('delete', scope.row)">
                  删除
                </div> -->
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- <div class="pagination">
        <el-pagination background
                       v-model:current-page="state.params.pageNum"
                       v-model:page-size="state.params.pageSize"
                       :page-sizes="[10, 20, 30, 50]"
                       layout="total, sizes, prev, pager, next, jumper"
                       :total="state.totalSize"
                       @size-change="methods.handleSizeChange"
                       @current-change="methods.handleCurrentChange" />
      </div> -->

      <el-dialog v-model="state.dialogData.show"
                 center
                 v-if="state.dialogData.show"
                 :title="state.dialogData.type == 'edit'? '编辑部门':'新增部门'"
                 :width="$px2rem('550px')"
                 top="15vh">
        <!-- default-expand-all -- 全部展开 -->
        <!-- :default-expanded-keys="[2,3]" -- 部分展开 -->
        <!--  :default-checked-keys="[5,4]" -- 默认选中的数据 -->
        <div class="pl20 pr30 mt20">
          <el-form-item label="父级部门："
                        label-width="100px"
                        v-if="state.dialogData.type !== 'add' && state.dialogData.type !== 'edit'">
            <div>{{ state.dialogData.data.deptName }}</div>
          </el-form-item>
          <el-form-item label="部门名称："
                        label-width="100px">
            <el-input placeholder="请输入部门名称"
                      clearable
                      maxlength="20"
                      v-model="state.dialogData.form.deptName"></el-input>
          </el-form-item>
          <el-form-item label="负责人："
                        label-width="100px">
            <el-select clearable
                       placeholder="请选择负责人"
                       v-model="state.dialogData.form.leaderId">
              <el-option v-for="i in state.dialogData.options"
                         :key="i"
                         :label="i.userName"
                         :value="i.id" />
            </el-select>

          </el-form-item>
        </div>
        <div class="mt20 tar mb10 mr30">
          <el-button v-preventReClick
                     type=""
                     @click="state.dialogData.show = false">取消</el-button>
          <el-button v-preventReClick
                     @click="methods.addDepartment"
                     type="primary">确定</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script setup>
import {
  ref,
  onMounted,
  reactive,
  toRefs,
  defineComponent,
  getCurrentInstance,
} from "vue";
import { ElMessage, ElLoading, ElMessageBox } from "element-plus";
import { useRouter } from "vue-router";
const router = useRouter();
const app = getCurrentInstance()?.proxy;
const initState = () => {
  return {
    dialogData: {
      show: false,
      data: {},
      list: [],
      options: [],
      type: '',
      form: {
        deptName: '',
        leaderId: ""
      },
    },
    loading: false,
    totalSize: 0,
    tableData: [],
    params: {

    },
    totalInputColumns: [
      // { key: "name", label: "角色名称", type: "input" },
      // { key: "status", label: "状态", type: "select" },
      // { key: "type", label: "平台", type: "select" },
    ],
  };
};
const state = reactive(initState());
onMounted(() => {
  methods.getDataList();
  methods.getUserList()
});
const methods = {

  handleAction (type, data) {
    switch (type) {

      case "query": //查询
        methods.getDataList();
        break;
      case "reset": // 重置
        state.params = initState().params;
        break;
      case "addSon": // 编辑
        state.dialogData.form.deptName = ''
        state.dialogData.form.leaderId = ''
        state.dialogData.type = type
        state.dialogData.data = data
        state.dialogData.show = true

        break;
      case "add": // 编辑
        state.dialogData.form.deptName = ''
        state.dialogData.form.leaderId = ''
        state.dialogData.type = type
        state.dialogData.data = {}
        state.dialogData.show = true
        break;
      case "edit": // 编辑
        console.log(data);
        state.dialogData.data = data
        state.dialogData.form.deptName = data.deptName
        state.dialogData.form.leaderId = data.leaderId
        state.dialogData.type = type
        state.dialogData.show = true
        break;

      case "delete": // 删除
        ElMessageBox.confirm("请确认是否删除该部门?", "删除部门", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            app.$http.get("/sysDept/deleteSysDeptById?id=" + data.id).then((res) => {
              if (res.code == 200) {
                methods.getDataList();
                ElMessage({
                  type: "success",
                  message: "已删除",
                });
              }

            });
          })
          .catch(() => {
            methods.getDataList();
            ElMessage({
              type: "info",
              message: "已取消",
            });
          });
        break;
    }
  },

  // 添加部门
  addDepartment () {
    if (state.dialogData.form.deptName == '' || state.dialogData.form.leaderId == '') {
      return ElMessage.error('请确定信息是否完整')
    } else {
      let url = 'sysDept/saveSysDept'
      if (state.dialogData.type == 'edit') {
        url = 'sysDept/updateSysDept'
      }
      app.$post(url, {
        id: state.dialogData.type == 'edit' ? state.dialogData.data.id : null,
        parentId: state.dialogData.type == 'edit' ? null : state.dialogData.data.id ? state.dialogData.data.id : 1,
        deptName: state.dialogData.form.deptName,
        leaderId: state.dialogData.form.leaderId,

      }).then(res => {
        if (res.code == 200) {
          state.dialogData.form.deptName = ''
          state.dialogData.form.leaderId = ''
          state.dialogData.show = false
          methods.getDataList()
        }
      })

      // 

    }
  },


  getUserList () {
    app.$get('sysuser/account/getDeptLeaderList').then(res => {
      if (res.data) {
        state.dialogData.options = res.data
      }
    })
  },
  getDataList () {
    state.loading = true
    app.$post("/sysDept/getList", state.params)
      .then((res) => {
        state.tableData = res.data;
        state.loading = false
      }).catch(() => {
        state.loading = false
      })
  },
  //分页变化
  handleSizeChange () {
    state.params.pageNum = 1;
    methods.getDataList();
  },
  //表格翻页
  handleCurrentChange () {
    methods.getDataList();
  },
};
</script>

<style lang="scss" scoped>
.appBox {
  background: #fff;
  border-radius: 5px;
  padding: 20px;
  height: calc(100% - 20px);
  width: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  .tabaleBox {
    overflow: hidden;
    flex: 1;
  }
  .btnsDatil {
    color: #0079fe;
    cursor: pointer;
  }
  .pagination {
    margin-top: 20px;
    height: 50px;
    display: flex;
    justify-content: flex-end;
  }
  ::v-deep(.el-dialog__body) {
    max-height: 380px;
  }
  .imgs {
    flex-wrap: wrap;
    .forbox {
      // width: 150px;
      height: 150px;
      margin: 10px 0 0 10px;
    }
    .imgBox {
      height: 100%;
      width: auto;
    }
    .videoBox {
      width: auto;
      height: 100%;
    }
  }

  // .imgs .forbox:nth-child(4n + 1) {
  //   margin-left: 0;
  // }
}
</style>
